<template>
    <u-row justify="start" gutter="5" customStyle="margin:20rpx 0" @click="toHouseDetailPage(data.id)">
        <u-col span="5">
            <u-image :src="data.room_img.length > 0 ? data.room_img[0] : data.join_public_img[0]"
                      border-radius="20rpx"
                      width="280rpx"
                      height="220rpx"
                      shape="square"></u-image>
        </u-col>
        <u-col span="7">

            <view class="price-box">
                <view>
                    <view class="title"><text>{{data.title}}</text></view>
                    <view class="info"><text class="info">{{data.area}}㎡ - {{data.section}}室{{data.office}}厅{{data.hygiene}}卫</text></view>
                </view>
                <view style="position: relative" v-if="data.commission_val">
                    <u-image src="https://sy-k.cn/static/admin/images/ii_3.png" mode="widthFix" :lazy-load="true" width="140rpx" height="100rpx"></u-image>
                    <text style="color: gold; font-size: 20rpx; position: absolute; top:10rpx; left: 60rpx;">{{data.commission_val}}元</text>
                </view>
            </view>

            <u--text
                prefixIcon="map" iconStyle="font-size: 24rpx"
                size="24rpx" lineHeight="24rpx" margin="12rpx 0"
                :text=" '位于' + data.s_address + '附近'"></u--text>

            <u-row>
                <view class="tag" v-for="(item,index) in data.public_special_info" v-if="index <= 3">
                    <u-tag :text="item.name" plain size="mini"></u-tag>
                </view>
                <view class="tag"><u-tag text="智能门锁" v-if="parseInt(data.lock_type)===2" plain size="mini"></u-tag></view>
                <view class="tag"  v-if="data.public_special_info.length <= 3">
                    <u-tag :text="data.orientation" plain size="mini"></u-tag>
                </view>

                <view class="tag"><u-tag text="近地铁" v-if="data.dt_info.Linesname !== undefined" plain size="mini"></u-tag></view>

            </u-row>
            <view class="price-box">
                <view>
                    <text class="price">{{parseInt(data.lease_priec)}}</text>
                    <text class="unit">元/月</text>
                </view>
                <view style="padding-top: 10rpx" v-if="parseInt(data.is_subsidy_all)===1">
                    <u-image src="https://sy-k.cn/static/admin/images/ii_1.png" mode="widthFix" width="120rpx" height="80rpx"></u-image>
                </view>
                <view style="transform:scale(0.75);" v-if="data.subsidy_val">
                    <u-tag :text="`补贴`+ data.subsidy_val +`元`" plain shape="circle" size="mini" type="error"></u-tag>
                </view>
            </view>

        </u-col>
    </u-row>
</template>

<script>
    export default {
        name: "HouseItem",
        props: {
            data: {
                type: Object
            }
        },
        methods:{
            toHouseDetailPage(id){
                uni.navigateTo({
                    url: '/pages/user/index/detail' + uni.$u.queryParams({
                        id: id,
                        tel: this.data.tel,
                        linesname: this.data.dt_info.Linesname,
                        stationname: this.data.dt_info.Stationname
                    })
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tag {
        margin-right: 10rpx;
    }
    .title{
        font-weight: bold;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
        @include flex(row);

    }
    .info{
        font-size: 24rpx;
    }
    .price{
        font-size: 32rpx;
        font-weight: bold;
        color: #D38450;
    }
    .unit{
        margin-left: 8rpx;
        font-size: 20rpx;
        color: #D38450;
    }
    .price-box{
        @include flex(row);
    }
</style>